<!doctype html>

<html style="height:100%">
<head>
    <title>代码片段自动生成</title>

    <link rel="stylesheet" href="{{ url_for('static', filename='jquery-ui.css') }}" />
    <script src="{{ url_for('static', filename='jquery-3.3.1.js') }}"></script>
    <script src="{{ url_for('static', filename='jquery-ui.js') }}"></script>
    <style type="text/css">
        body,input,textarea {font-family:Microsoft YaHei; font-size:100%; border-radius:5px;}
        textarea {width:98%; height:100%; resize:none;}
        table {table-layout:fixed; }
    </style>
</head>

<body style="margin:0; width:100%; height:100%">

    <!-- 标题 -->
    <div align=center style="width:100%; height:50px; background:#003399; ">
        <table border=0 style="width:80%; height:100%; ">
            <tr align=left>
                <th width=30%>
                    <a href="" style="text-decoration:none; color:white; font-size:150%; ">代码片段自动生成</a>
                </th>
            </tr>
        </table>
    </div>

    <!-- 正文 -->
    <div align=center style="width:100%; height:90%; ">
        <table border=0 style="width:80%; height:100%; text-align:center;">
            <tr style="height:50px">
            <th colspan=2>
                代码模板&nbsp;<input type=text id=template size=80 onkeydown="keyDown()" >&nbsp;
                <input type=submit value=提交 onclick="doProcess()">

                <br>
                
                特征字符&nbsp;<input type=text id=keyword value=###>&nbsp;
                <div id=radio>
                <input type="radio" id="radio1" name="radio" value=num checked="checked"><label for="radio1">数字</label>
                <input type="radio" id="radio2" name="radio" value=strlist><label for="radio2">字符List</label>
                <!-- <input type="radio" id="radio3" name="radio" value=other><label for="radio3">other</label> -->
                </div>
            </th>
            </tr>

            <tr style="height:20px; background-color:#CC0033; color: white">
            <th>
                输入
            </th>
            <th>
                <div id=ret_count>输出</div>
            </th>
            </tr>

            <tr>
            <td>
                <textarea id=param></textarea>
            </td>
            <td>
                <textarea id=ret_str style="background-color:#EBEBE4"></textarea>
            </td>
            </tr>

            <!-- 尾巴 -->
            <tr style="height:20px;">
            <td>
                <input type=submit value=重置 onclick="doReset()"/>
            </td>
            <td>
                <input type=submit value=拷贝 onclick="doCopy()"/>
            </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
    <!-- 提示框 -->
    $( document ).tooltip();

    <!-- 按钮 -->
    $( "input[type=submit], button" )
    .button()
    <!-- .click(function( event ) { -->
    <!-- event.preventDefault(); -->
    <!-- }); -->

    <!-- 单选按钮 -->
    $( "#radio" ).buttonset();

    <!-- 校验为空 -->
    function check_null(value, alerttxt)
    {
        if (value != "")
        {
            return true;
        }
        else
        {
            alert(alerttxt);
            return false;
        }
    }

    <!-- 处理 -->
    function doProcess(){

        $.post('/doProcess', {
            template: $('#template').val(),
            keyword: $('#keyword').val(),
            type: $('#radio :checked').val(),
            param: $('#param').val(),
        },
        function (data, status) {
            if (status == 'success')
            {
                ret_json = $.parseJSON(data);

                $('#ret_count').html('输出(' + ret_json.ret_count + ')')
                $('#ret_str').val(ret_json.ret_str)
            }
            else
            {
                $('#ret_count').html('输出(' + status + ')')
            }

        })
    }

    <!-- 输入框，回车 -->
    function keyDown()
    {
        if(event.keyCode==13)
        {
            doProcess();
        }
    }

    <!-- 拷贝 -->
    function doCopy()
    {
        var widget = $("#ret_str")
        widget.focus();
        widget.select();
        document.execCommand("Copy");
        alert("已复制至剪切板");
    }

    <!-- 重置 -->
    function doReset()
    {
        $("#reg").val("")
        $("#content").val("")
        $("#ret_str").val("")
    }
    </script>
</body>
</html>